<meta title="选择会员" width="1000" args="multi:true" />
<div class="p">
    <div class="p-b clearfix">
        <form class="form-inline m-b-wrapper-xs pull-left" id="form" s="form"
              s-form="{action:function(){$page.node.val(1); $usersGrid.refresh()}}"
        >
            <input autocomplete="off" type="text" class="form-control input-sm" name="id" placeholder="用户ID" />
            <input autocomplete="off" type="text" class="form-control input-sm" name="startRelationPath" placeholder="父关系" />
            <input autocomplete="off" type="text" class="form-control input-sm" name="relationPath" placeholder="关系链" />
            <input autocomplete="off" type="text" class="form-control input-sm" name="phone" placeholder="会员手机号" />
            <div class="form-control s-select input-sm " style="width: 200px;"
                 s="select"
                 id="province"
                 s-valid-label="省份"
                 s-build="S.get('api/region/list/0')" >
                <input autocomplete="off" type="hidden" name="provinceId" class="s-select-input" />
                <div class="s-select-mirror">
                    <span></span>
                    <i class="fa fa-caret-down"></i>
                </div>
                <div class="s-select-panel">
                    <input autocomplete="off" type="text" class="s-select-filter">
                    <ul class="s-select-list">
                        <li class="s-select-list-item" value="">选择省份</li>
                    </ul>
                </div>
            </div>
            <div class="form-control s-select input-sm" style="width: 200px;"
                 s="select"
                 id="city"
                 s-data="''"
                 s-build-switch="'off-on'"
                 s-select="{title: 'name'}"
                 s-build="S.get('api/region/list/' + ($province.val() || -1))" >
                <input autocomplete="off" type="hidden" class="s-select-input" name="cityId" />
                <div class="s-select-mirror">
                    <span></span>
                    <i class="fa fa-caret-down"></i>
                </div>
                <div class="s-select-panel">
                    <input autocomplete="off" type="text"  class="s-select-filter">
                    <ul class="s-select-list">
                        <li class="s-select-list-item" value="">选择城市</li>
                    </ul>
                </div>
            </div>
            <div class="form-control s-select input-sm" style="width: 200px;"
                 s="select"
                 id="district"
                 s-data="''"
                 s-build-switch="'off-on'"
                 s-select="{title: 'name'}"
                 s-build="S.get('api/region/list/' + ($city.val() || -1))" >
                <input autocomplete="off" type="hidden" class="s-select-input" name="districtId" />
                <div class="s-select-mirror">
                    <span></span>
                    <i class="fa fa-caret-down"></i>
                </div>
                <div class="s-select-panel">
                    <input autocomplete="off" type="text"  class="s-select-filter">
                    <ul class="s-select-list">
                        <li class="s-select-list-item" value="">选择区县</li>
                    </ul>
                </div>
            </div>
            <select class="form-control input-sm" s="select"
                    name="level"
                    s-build="S.get('/api/enum/valuesMap/core.enums.UserLevel')">
                <option value="">会员等级</option>
            </select>
            <!--<select class="form-control input-sm"-->
                    <!--name="locked">-->
                <!--<option value="">等级有效性</option>-->
                <!--<option value="true">等级未过期</option>-->
                <!--<option value="false">等级已过期</option>-->
            <!--</select>-->
            <select class="form-control input-sm"
                    name="locked">
                <option value="">是否锁定</option>
                <option value="true">已锁定</option>
                <option value="false">未锁定</option>
            </select>
            <select class="form-control input-sm" s="select"
                    name="sort"
                    s-build="S.get('/api/enum/valuesMap/core.enums.UserSort')">
                <option value="">所有排序</option>
            </select>
            <input autocomplete="off" type="hidden" name="page" id="page" value="1"/>
            <input autocomplete="off" type="submit" class="btn btn-default btn-sm" value="查找"/>
        </form>
    </div>
    <div style="max-height: 600px; overflow: auto">
        <table
                id="usersGrid"
                s='datac,nda,check'
                s-check="{multiple: multi}"
                s-data="Smart.cleanJsonRef(S.get('/api/user/search', $form.node.serialize()))"
                class="table table-stripped table-bordered">
            <tr>
                <th>
                    <label class="s-checkbox">
                        <input autocomplete="off" type="checkbox" s-check-role="checkall-h"/>
                        <span class="s-checkbox-indicator"></span>
                    </label> ID
                </th>
                <th>昵称</th>
                <th>手机号</th>
                <th>省份</th>
                <th>城市</th>
                <th>区/县</th>
                <th>关系链</th>
                <th>会员级别</th>
                <th class="text-center">锁定状态</th>
            </tr>
            <tbody s="loop" s-data-filter="'results'">
            <tr s-loop-role="empty">
                <td colspan="10" class="alert alert-warning">
                    暂无数据
                </td>
            </tr>
            <tr s-loop-role="row" s="datac" s-check-role="i">
                <td>
                    <label class="s-checkbox">
                        <input autocomplete="off" type="checkbox" s-check-role="h" />
                        <span class="s-checkbox-indicator"></span>
                    </label>
                    <span name="id"></span>
                </td>
                <td s="tpl">
                    <div style="width: 200px;">
                        <img src="{%=this.avatarUrl%}" style="max-width: 50px; max-height: 50px;" class="pull-left" />
                        <div class="pull-right" style="width: 140px;">
                            <div>{%=this.nickname%}</div>
                        </div>
                    </div>
                </td>
                <td name="phone"></td>
                <td name="province"></td>
                <td name="city"></td>
                <td name="district"></td>
                <td name="relationPath"></td>
                <td s="tpl">
                    <span name="levelTitle">{%=this.levelTitle%}</span>
                </td>
                <td s="tpl" class="text-center">
                    <label class="label
                            {%
                                switch(this.locked) {
                                    case false: out.print('label-success'); break;
                                    case true: out.print('label-danger'); break;
                                    default: out.print('label-default');break;
                                }
                            %}
                        ">{%=this.locked ? '已锁定' : '正常'%}</label>
                </td>
            </tr>
            </tbody>
            <tfoot>
            <tr>
                <td colspan="10" class="text-right">
                    <ul s="pagination" id="sellerPagination"
                        s-pagination="{action:function(){$page.node.val(this); $usersGrid.refresh()}}"
                        class="pagination pagination-sm">
                    </ul>
                    共有<span name="total"></span>个数据
                </td>
            </tr>
            </tfoot>
        </table>
    </div>
</div>
<script type="text/javascript">
    S.on('s-ready', function(){
        S.cascade($province, $city, $district);
    })
	S.meta.btns = [
		{
			name: "选择",
			style: "btn btn-primary",
			click: function() {
				var datas = $usersGrid.getCheckedData();
				if (datas.length) {
					S.close(datas);
				} else {
					S.toast("请先选择！", "warning");
				}
			}
		},
		{
			name: "关闭",
			style: "btn btn-default",
			click: function() {
				S.close();
			}
		}
	]
</script>